import { Button, Radio, Select, Space, Table } from 'antd';
import { useState, useEffect } from 'react'
import LittleTitle from '../../../../../../common/LittleTitle';
import _ from 'lodash';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import rangeDisplayIcon from '../../../Jcyj/rangeDisplayIcon';


export default function YxdjypResult(props) {
    const { result } = props;

    const map = useBusinessMap();

    const [current, setCurrent] = useState(result.data?.[0])

    useEffect(() => {
        setCurrent(result.data?.[0])
    }, [result])
    /* 
    --下面这个钩子函数用于范围内各种'承灾体'、'减灾资源'在地图是显示，与'监测预警'使用同函数，函数在'监测预警'文件夹下，监测点、预警信息、隐患点数据暂无
    --rangeDisplayIcon(data, circle, map, ypType);
    --↓
    */
    useEffect(() => {
        //console.log("9", result)
        result.data.map(e => {
            let data, wkt = e.geometry, ypType = "cztfx";
            data = e.resp.data.map(e => ({ name: e.cztxl }));
            rangeDisplayIcon(data, _, map, ypType, wkt);
            // return () => {
            //     const allLayers = map.getLayers().getArray();
            //     [...allLayers].forEach(l => {
            //         if (l?.get("layerName") === 'rangeDisplayIcon')
            //             map.removeLayer(l);
            //     })
            // }
            return 0;
        })
        // let data, wkt = result.geom, ypType = type;
        // data = result.data.map(e => ({ name: e.yhlx }));
        // rangeDisplayIcon(data, _, map, ypType, wkt);
        return () => {
            const allLayers = map.getLayers().getArray();
            [...allLayers].forEach(l => {
                if (l?.get("layerName") === 'rangeDisplayIcon')
                    map.removeLayer(l);
            })
        }
    }, [result, map])
    /* 
    --↑
    */

    return <div style={{
        padding: "0 12px"
    }}>
        {/* <Radio.Group>
            <Radio.Button>承灾体</Radio.Button>
            <Radio.Button>减灾资源</Radio.Button>
        </Radio.Group> */}
        <LittleTitle>分析概要</LittleTitle>
        <div style={{
            margin: "8px 0 16px 0"
        }}>
            <>
                {result.data?.map(item => {
                    return <div style={{
                        // textAlign: "center"  
                    }}>
                        {item.item.yhmc} 共影响承灾体
                        <span style={{
                            fontWeight: "bold",
                            color: '#f50',
                            padding: "0 3px"
                        }}>{_.sumBy(item.resp?.data, 'count')}</span>
                        处
                    </div>
                })}
            </>
        </div>

        <LittleTitle>结果详情</LittleTitle>
        <div style={{
            padding: "12px 0"
        }}>
            <Select style={{
                width: "100%"
            }} value={result.data?.findIndex(d => d === current)} options={result.data?.map((item, i) => {
                return {
                    value: i,
                    label: item.item?.yhmc
                }
            })} onChange={value => {
                setCurrent(result.data?.[value]);
            }}>

            </Select>
        </div>
        <Table bordered size="small" dataSource={current?.resp?.data} columns={[{
            dataIndex: 'cztxl',
            title: '类型'
        }, {
            title: '数量',
            dataIndex: 'count'
        }, {
            width: 80,
            align: "center",
            render: (record) => {
                return <Button type="link" size="small" onClick={e => {
                    debugger
                    props?.onUpdate(record.cztxl, current.geometry);
                }}>详情</Button>
            }
        }]} pagination={{
            pageSize: 10
        }} />
    </div >;
}